@charset "utf-8";
/*
 * 全局 通知提醒 Message
 */
.message-notice {position: absolute;top:0;left:0;width:100%;font-size:14px;transition: all .3s ease;text-align: center;z-index:1000;}
.message-notice[position="left"] {text-align:left;}
.message-notice[position="left"] p {margin-left: 10px;}
.message-notice[position="right"] {text-align:right;left:auto;right:10px;}
.message-notice[position="right"] p {margin-right: 10px;}
.message-notice p {display:inline-block;min-width:100px;max-width: 600px;padding:12px 25px 12px 42px;color:#515a6e;border:1px solid #e3e2e2;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.15);background:#fff;text-align:left;position: relative;line-height:22px;}  
.message-notice p i {position: absolute;top:15px;left:13px;}
.message-notice.success p {background-color: #f6ffed;border-color:#b7eb8f;color:#67c23a;}
.message-notice.warning p {background-color: #fdf6ec;border-color:#e7d7c0;color:#e6a23c;}
.message-notice.error p {background-color: #fef0f0;border-color:#f3cdcd;color:#f56c6c;}
.message-notice p em {position: absolute;right:5px;top:11px;cursor: pointer;display: inline-block;width:24px;height:24px;text-align:center;}
.message-notice p em svg {vertical-align: middle;}
.notice-slide-fadeIn {
    opacity: 0;
    -webkit-animation:notice-slide-fadeIn .3s ease both;
            animation:notice-slide-fadeIn .3s ease both;    
}
.notice-slide-fadeOut {
    opacity: 1;transform: translateY(35px);
    -webkit-animation:notice-slide-fadeOut .3s ease-out both;
            animation:notice-slide-fadeOut .3s ease-out both;    
}
@-webkit-keyframes notice-slide-fadeIn {
    to {
        opacity: 1;transform: translateY(35px);
    }
}
@keyframes notice-slide-fadeIn {
    to {
        opacity: 1;transform: translateY(35px);
    }
}
@-webkit-keyframes notice-slide-fadeOut {
    to {
        opacity: 0;transform: translateY(0);
    }
}
@keyframes notice-slide-fadeOut {
    to {
        opacity: 0;transform: translateY(0);
    }
}

.message-notice .circular {
    height: 22px;
    width: 22px;
    margin-top:-3px;
    animation: loading-rotate 2s linear infinite;
}
.message-notice .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
}
@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}
@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
    }

    to {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
    }
}